<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="${(shopPo.name)!}" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>${(shopPo.name)!}</title>
<link href="/css/common.css" type="text/css" rel="stylesheet" />
<link href="/css/index.css" type="text/css" rel="stylesheet" />
<link href="/css/icons.css" type="text/css" rel="stylesheet" />
<link href="/css/product.css" type="text/css" rel="stylesheet" />
<link href="/css/ucenter.css" type="text/css" rel="stylesheet" />
<link href="/css/add2home.css" type="text/css" rel="stylesheet" />

<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/caichong_common.js" type="text/javascript"></script>
<script src="/js/jquery.validate.min.js" type="text/javascript"></script>
<style>
.toSendSms A {
	display: block;
	color: #fff;
	padding: 10px 0;
	background: #56bf10;
	border-radius: 4px;
	text-shadow: 1px 1px 0 rgba(0,0,0,.2);
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}
</style>
  <link href="/css/style.css" rel="stylesheet" type="text/css" />
  <script src="/js/common.js"></script>
  <script>
  		var shop = "shopMer_${(shopPo.id)!}";
  		var shopCart = "shopcartMer_${(shopPo.id)!}";
  		
  		/*** 增加菜品数量 ****/
		function add(dishNum){
			var a = document.getElementById("dishOK_" + dishNum);
			var b = document.getElementById("dishPrice_" + dishNum);
			var num = parseFloat(a.value);
			var price = parseFloat(b.value);
			var unitPrice = price/num;
			num++ ;
			price = unitPrice * num;
			a.value = num;
			b.value = price;
			sum();
		}
		/*** 减少菜品数量 ****/
		function subtraction(dishNum){
			var a = document.getElementById("dishOK_" + dishNum);
			var b = document.getElementById("dishPrice_" + dishNum);
			var num = parseFloat(a.value);
			var price = parseFloat(b.value);
			var unitPrice = price/num;
			if ( num > 1 )
			{
				num--;
				price = unitPrice * num;
			}
			else if ( num == 1 )
			{
				Message("至少选择一份");
				return;
				/* if (!confirm("确认要删除？")) {
		            return;
		        }
				myOrderList.removeChild(a.parentNode.parentNode);
				listInitialNum --; */
			}
			a.value = num;
			b.value = price;
			sum();
		}
		
		//删除菜品
		function del(dishNum){
			var a = document.getElementById("dishOK_" + dishNum);
			//var b = document.getElementById("dishPrice_" + dishNum);
			if (!confirm("确认要删除？")) {
	            return;
	        }
			myOrderList.removeChild(a.parentNode.parentNode);
			listInitialNum --;
			sum();
		}
		
		/*** 计算菜品合计价格和数量 ****/
		function sum(){
			var sumPrice = document.getElementById("sumPrice");
			var sumDishes = document.getElementById("sumDishes")
			var sumNum = 0 ;
			var sumDishesNum = 0 ;
			
			//alert(listInitialNum);
			for( i = 0 ; i < listInitialNum - 1 ; i++ ){//有一个li用于存放菜品合计价格和数量
					var price = myOrderList.getElementsByTagName("li")[i].getElementsByTagName("span")[1].getElementsByTagName("input")[0];
					var thisDishNum = myOrderList.getElementsByTagName("li")[i].getElementsByTagName("span")[2].getElementsByTagName("input")[1];
					sumNum = sumNum + parseFloat(price.value);
					sumDishesNum = sumDishesNum + parseFloat(thisDishNum.value);
			}
			sumPrice.innerHTML = format_number(sumNum) ;
			sumDishes.innerHTML = sumDishesNum ;
			sumArray();
		}
		/*** 统计全部已点菜品 ****/
		function sumArray(){
			var sumPrice = document.getElementById("sumPrice");
			var sumDishes = document.getElementById("sumDishes")
			var sumNum = 0 ;
			var sumDishesNum = 0 ;
			
			var sumDishesArray = "";//cookie中保存商品id的值
			var selectedDishes = new Array();//cookie中保存商品id的值
			
			//alert(listInitialNum);
			for( i = 0 ; i < listInitialNum - 1 ; i++ ){//有一个li用于存放菜品合计价格和数量
					var id = myOrderList.getElementsByTagName("li")[i].getElementsByTagName("span")[1].getElementsByTagName("input")[0].id.split("_")[1];
					var price = myOrderList.getElementsByTagName("li")[i].getElementsByTagName("span")[1].getElementsByTagName("input")[0];
					var thisDishNum = myOrderList.getElementsByTagName("li")[i].getElementsByTagName("span")[2].getElementsByTagName("input")[1];
					sumNum = sumNum + parseFloat(price.value);
					sumDishesNum = sumDishesNum + parseFloat(thisDishNum.value);
					if ( i == listInitialNum - 2 ){
						//sumDishesArray += id + "," + price.value + "," + thisDishNum.value ;
						sumDishesArray += id + "," + thisDishNum.value ;
					}else{ 
						//sumDishesArray += id + "," + price.value + "," + thisDishNum.value + "|" ;
						sumDishesArray += id + "," + thisDishNum.value + "|" ;
					}
					
					selectedDishes.push( id );
			}
			//alert(sumPrice.innerHTML);
			//alert(selectedDishes + "----"  + sumDishesArray)
			//if(selectedDishes.length>0 && sumDishesArray !="" ){
				setCookie(shop,selectedDishes,30);
				setCookie(shopCart,sumDishesArray,30);
			//}
			//alert(getCookie(shop));
			//alert(sumPrice.innerHTML + "_" +sumDishesArray);
			//setCookie(shopCart,sumDishesArray,30);
			document.getElementById("sumArrayArea").value = sumDishesArray;
		}
		
		/* function checkSelected(obj,value){
			var dishDiv = obj.parentNode.parentNode;
			if (obj.checked == true )
			{
				dishDiv.style.backgroundColor = '#4C9ED9';
			}
			else
			{
				dishDiv.style.backgroundColor = '';
			}
		} */
  </script>
 </head>
 <body>
 <div id="container">
	<!-- <div id="header">
		<div id="left"><a href="javascript:" onClick="bc()"><img src="/template/pic/transparent.png" class="return" /></a><h1>${(shopPo.name)!}</h1></div>
		<div id="right"><a href="/cart/view/${(shopPo.id)!}">购物车</a>&nbsp;<a href="/"><img src="/template/pic/transparent.png" class="index" /></a></div>
	</div> -->
	
	<div id="header" style="position:fixed;top:0px;">
		<div id="left">
			<a href="javascript:" onClick="bc()"><img src="/images/transparent.png" class="return" /></a>
			<h1>${(shopPo.name)!}</h1>
		</div>
		<div id="right">
			<!-- <a href="/cart/view/${(shopPo.id)!}">购物车</a>&nbsp;<a href="/"><img src="/images/transparent.png" class="index" /></a> -->
			<!-- <input type="button" value="一键点菜" onclick="" class="autoDish"> -->
			<div class="top-shortcuts">
				<ul>
					<!-- <li class="ucenter"><a href="/customer">用户中心</a></li>
					<li class="cates">
					<a href="/menu/categories">全部分类</a></li> -->
					<li class="cart" id="shoppingcart"><a
						href="/app/toCart?id=${shopPo.id!}&mobileNo=${mobileNo!}">购物车</a></li>
				</ul>
			</div>
		</div>
	</div>
	
	<!-- <form action="/submitOrders/view/${(shopPo.id)!}" method="post"> -->
	<div id="content">
		<h1 style="margin:10px 0 10px 2px;">我的菜单</h1>
		<ul class="myOrderList" id="myOrderList">
			<#list productList as product>
            <li>
				<span class="dish">
					<input type="button" value="×" onclick="del('${product.id!}');" class="button" id="subtractionButton">&nbsp;${product.name!}
				</span>
				<font class="price">￥<i id="unitDishPrice_${product.id!}">${product.now_price!}</i>/份</font>
				<span class="price" style="width:10px;"><input type="hidden" id="dishPrice_${product.id!}" value="${product.now_price!}"/>
									<!-- <label id="dishPrice_${product.id!}">${product.price!}</label> --></span>
				<span class="amount">
					<input type="button" value="+" onclick="add('${product.id!}');" class="button" id="addButton">
					<input type="text" name="dishOK_${product.id!}" id="dishOK_${product.id!}" style="color:#000" class="num" value="1" disabled="disabled">
					<input type="button" value="-" onclick="subtraction('${product.id!}');" class="button" id="subtractionButton">
				</span>
			</li>
        	</#list>
        	<#if (productList?size = 0)>
        		<li>您的菜单是空的，<a href="/app?id=${(shopPo.id)!}&mobileNo=${(mobileNo)!}">前往点菜>></a></li>
        	</#if>
            
        	<li class="sum">
				预计消费合计 <font color="red"><strong>￥<label id="sumPrice">0</label></strong></font> 元 ( 共<label id="sumDishes">0</label>道菜 )
			</li>
		</ul>		
		<br>
		&nbsp;<input type="hidden" name="sumArrayArea" id="sumArrayArea">
		&nbsp;<font style="font-size: 16px;">客户手机号码：</font><input type="text" style="height: 30px;width: 120px; border-color: #ccc" name="mobileNo" id="mobileNo" value="${mobileNo!}">
		<#if session.session_shop.id!=5>
			<br><br>
			&nbsp;&nbsp;<font style="font-size: 16px;">是否需要付定金：</font>&nbsp;&nbsp;&nbsp;
			<#if shopPo.id==1>
			<input type="checkbox" name="frontSign" style="zoom:3;border:1px solid #CCC" checked/>
			<#else>
			<input type="checkbox" name="frontSign" style="zoom:3;border:1px solid #CCC" <#if frontSign?? && frontSign==1>checked</#if> />
			</#if>
		</#if>
		<script>
				var myOrderList = document.getElementById("myOrderList");
				var listInitialNum = myOrderList.getElementsByTagName("li").length;
				//delCookie(shopCart);
				//alert(getCookie(shop) +"==="+ getCookie(shopCart) );
				var shopCartCookie = getCookie(shopCart);
				if (typeof(shopCartCookie) != "undefined" && shopCartCookie != "") { 
					var shopCookieDishes = getCookie(shopCart).split("|");
					for ( i=0 ; i < shopCookieDishes.length ; i++ ){
						//alert("shopCookieDishes[i]==="+shopCookieDishes[i]);	
						var dishNumArray = shopCookieDishes[i].split(",");
						//alert(dishNumArray[0]);
						//alert(document.getElementById("unitDishPrice_" + dishNumArray[0]));
						var unitDishPrice = document.getElementById("unitDishPrice_" + dishNumArray[0]).innerHTML;
						var price = parseFloat(unitDishPrice) * parseFloat(dishNumArray[1]);
						//alert(price);
						document.getElementById( "dishPrice_" + dishNumArray[0] ).value = price;
						document.getElementById( "dishOK_" + dishNumArray[0] ).value = dishNumArray[1];
					}
				}
				
				sum();
		</script>
		<!-- <ul class="myOrderInfo">
			<li align="center">
				<input type="button" id="sendSms" class="submitOrder" value="发送通知短信" style="width: 100%;">
				<a href="javascript:void(0);" id="sendSms">发送通知短信</a>
			</li>
		<ul> -->
	</div>
	<!-- </form> -->
	<section class="toSendSms">
		<a href="javascript:void(0);" id="sendSms">发送通知短信</a>
	</section>
 </div>
 <!-- 发送通知短信按钮 -->
		
 <script type="text/javascript">

 (function ($) {
	 
	 
	 $(document).ready(function () {
	     $("#sendSms").click(SendSmsByMer)
	 })
	 
	 var SendSmsByMer = function (e) {
		 e.preventDefault();
		 
		 
		 var frontSign = 0;
		 
		 var shopId = ${shopPo.id!};//商户ID
		 var sumArrayArea = $("#sumArrayArea").val();
		 if(sumArrayArea == ""){
			 Message("请先选择菜品");
			 return;
		 }
		 
		 var phone = /^1[3|5|8]\d{9}$/;
		 var mobileNo = $("#mobileNo").val();
		 if(mobileNo==""){
			 Message("请输入手机号");
			 return;
		 }
		 if(!phone.test(mobileNo)){
			 Message("只能输入手机号码");
			 return;
		 }
		 
		 var obj = document.getElementsByName("frontSign");
		 if(typeof(obj[0])!= "undefined" && obj[0].checked){//选中  
			 frontSign = 1;
		 }

		 var $this = $(this);
         $this.unbind().addClass("disable").empty().html("正在发送...");
		 
		 $.post("/app/sendSms", { 
	 		"shop_id": shopId, "sumArrayArea": sumArrayArea, "mobileNo": mobileNo, "frontSign":frontSign
	 	 }, 
	 	 function (result) {
	         if (result.Msg === 'Ok') {
	         	delCookie(shop);
	         	delCookie(shopCart);
	         	Message("发送成功!");
	         	window.location.href = "/app?id=${(shopPo.id)!}&mobileNo="+mobileNo;
	         }else{
	         	Message(result.Msg)
	         }
	         $this.click(AddAddress).removeClass("disable").val("发送通知短信")
	 	 }).error(AjaxError);
		 
		 var AjaxError = function (e, v) {
	         //alert(v);
	         //alert(e.message);
	     }  
	 }
 })(jQuery);
 
 function bc(){
		//alert(document.getElementById("sumArrayArea").value);
		/* if ( document.getElementById("sumArrayArea").value == "" )
		{
			window.history.back();
		}
		else{
			var arr=document.getElementById("sumArrayArea").value.split('|');
			var par="";
			for(var i=0;i<arr.length;i++){
				par+=arr[i].split(',')[0]+",";
			}
			par=par.substring(0,par.lastIndexOf(','));
			window.location="/product/view/${(shopPo.id)!}";
		} */
		window.location="/app?id=${(shopPo.id)!}&mobileNo=${mobileNo!}";
 }
 </script>
 </body>
</html>
